<template>
  <div class="main">
    <el-table
      id="table2"
      class="orderTab"
      :data="state.orderData"
      style="width: 100%,font-weight:bold,"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        prop="orderno"
        label="系统订单号"
        width="150px"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.orderno }}
        </template>
      </el-table-column>
      <el-table-column
        prop="ordertime"
        label="下单时间"
        align="center"
        width="120px"
      >
        <template #default="scope">
          {{ dayjs(scope.row.ordertime).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="买家id/名称"
        align="center"
        width="100px"
      >
        <template #default="scope">
          {{ scope.row.buyers.id }}/{{ scope.row.buyers.name }}
        </template>
      </el-table-column>
      <el-table-column prop="imgUrl" label="商品图片" align="center">
        <template #default="scope">
          <img :src="scope.row.productimg" alt="" />
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="商品标题"
        align="center"
        width="150px"
      >
        <template #default="scope">
          {{ scope.row.commoditytitle }}
        </template>
      </el-table-column>
      <el-table-column prop="num" label="商品件数" align="center">
        <template #default="scope"> {{ scope.row.number }}件 </template>
      </el-table-column>
      <el-table-column prop="pay" label="实付金额" align="center">
        <template #default="scope"> {{ scope.row.payamount }}元 </template>
      </el-table-column>
      <el-table-column prop="income" label="预估收益" align="center">
        <template #default="scope"> {{ scope.row.income }}元 </template>
      </el-table-column>
      <el-table-column prop="status" label="系统状态" align="center">
        <template #default="scope">
          {{ scope.row.settlementstatu }}
        </template>
      </el-table-column>
      <el-table-column prop="settlement" label="结算状态" align="center">
        <template #default="scope">
          {{ scope.row.systemstate }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300" align="center">
        <template #default="scope">
          <el-button color="#000" @click="goDetail(scope.$index, scope.row)">
            详情/编辑
          </el-button>
          <el-button
            type="danger"
            v-if="scope.row.settlementstatu !== '已失效'"
            @click="orderNone(scope.$index, scope)"
            >订单失效</el-button
          >
          <el-button
            type="info"
            disabled
            v-if="scope.row.settlementstatu === '已失效'"
            >已失效</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import orderStore from "../../stores/order.js";
import  getImageUrl  from "../../utils/images";


// 导入全局路由实例
import { useRouter } from "vue-router";

// 导入弹出框方法
import { dayjs, ElMessageBox } from "element-plus";

// 导入 消息提示方法
import { notiFication } from "@/utils/message";

// 全局路由实例激活
const router = useRouter();

// 激活数据仓库
const { state } = orderStore();
console.log(state);
const mulTable = ref([]);

//
function handleSelectionChange(e) {
  mulTable.value = e;
  console.log(mulTable.value);
}

//点击订单失效
function orderNone(index, item) {
  ElMessageBox.confirm("是否让订单失效？？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      state.orderData[index].settlementstatu = "已失效";
      notiFication("订单已失效");
    })
    .catch(() => {
      notiFication("已取消操作");
    });
}

/**
 * @function goDetail 点击详情跳转页面
 *  */
function goDetail(index,row) {
  // console.log(state.orderData[index]);
  // console.log(row);
  router.push({
    path: "/detail",
    // 携带点击的哪一行的参数
    query: { data:JSON.stringify(row) },
  
  });
}
</script>

<style lang="less" scoped>
.main {
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
}
:deep(.el-table__body-wrapper) {
  font-size: 10px;
}
button {
  margin-right: 10px;
}
:deep(.el-table thead) {
  // text-align: center;
  height: 60px;
  font-size: 14px !important;
}
:deep(.el-button + .el-button) {
  width: 80px;
}
:deep(.el-table td.el-table__cell div) {
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  width: 40px;
  height: 40px;
}
</style>
